<template>
  <div class="studentManage">
    <div class="filter-container">
      <div class="text">学生姓名</div>
      <el-input
        v-model="searchForm.name"
        placeholder="请输入学生姓名"
        style="width: 200px"
        class="filter-item"
      />
      <div class="text">学号</div>
      <el-input
        v-model="searchForm.name"
        placeholder="请输入学号"
        style="width: 200px"
        class="filter-item"
      />
        <el-button  class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>

    </div>
    <div class="tableContent">
      <CommonTable
        :pageInfo="pageInfo"
        :columns="studentManageColumns"
        :tableData="tableData"
        @handlePage="handlePage"
      >
        <template #state="{ row }">
          <el-tag v-if="row.state == '0'" type="success">启用</el-tag>
          <el-tag v-else-if="row.state == '1'" type="danger">禁用</el-tag>
        </template>
             <template #edit="{ row }">
                <el-button v-if="row.state == '0'" type="danger" size="mini" @click="handleState(row,'0')">
              禁用
            </el-button>
                  <el-button v-else-if="row.state == '1'" type="success" size="mini" @click="handleState(row,'1')">
              启用
            </el-button>
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>

            <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </CommonTable>
    </div>
     <el-dialog :title="'编辑学生'" v-if="dialogFormVisible" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="studentForm" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">
        <el-form-item label="姓名" prop="name">
                  <el-input v-model="studentForm.name" :disabled="true" />
        </el-form-item>
        <el-form-item label="学号" prop="studentId">
                  <el-input v-model="studentForm.studentId" :disabled="true" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="studentForm.phone" />
        </el-form-item>
        <el-form-item label="宿舍楼栋" prop="ssld">
          <el-select v-model="studentForm.ssld" class="filter-item" placeholder="请选择楼栋">
            <el-option v-for="(item,index) in ssldOptions" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="寝室号" prop="qsh">
          <el-select v-model="studentForm.qsh" class="filter-item" placeholder="请选择宿舍">
            <el-option v-for="(item,index) in qshOptions" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
       <el-form-item label="班级" prop="classDesc">
          <el-input v-model="studentForm.classDesc" placeholder="请输入班级"  />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleSure">
        确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonTable from "@/components/CommonTable"; // secondary package based on el-CommonTable
import { studentManageColumns } from "./columns.js";
import mixin from "@/mixin"
export default {
  name: "StudentManage",
  components: { CommonTable },
mixins:[mixin],
  props: {},
  data() {
    return {
      curRow:{},
      dialogFormVisible:false,
      studentManageColumns,
      searchForm: {
        name: "",
      },
      studentForm:{
name:'',
studentId:'',
phone:'',
ssld:'',
qsh:'',
classDesc:''
      },
      ssldOptions:[
        {
          name:'西一',
          value:'xiyi'
        }
      ],
      qshOptions:[
        {
          name:'101',
          value:'101'
        }
      ],
      pageInfo: {
        page: 1,
        limit: 10,
        total: 10,
      },
      tableData: [
        {
          name: "小李",
          studentId:'2024900289',
          phone:'13017666362',
          ssld:'xiyi',
          ssldName:'西一',
          qsh:'101',
          state:'0',
          classDesc:'软件一班'
        },
           {
          name: "小王",
          studentId:'2024900289',
          phone:'13017666362',
          ssld:'xiyi',
          ssldName:'西一',
          qsh:'101',
          state:'1',
          classDesc:'软件一班'
        },
      ],
         rules: {
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        ssld: [{ required: true, message: '请选择宿舍楼栋', trigger: 'change' }],
        qsh: [{ required: true, message: '请选择寝室号', trigger: 'change' }],
        classDesc:[{ required: true, message: '请输入班级', trigger: 'blur' }],
      },
    };
  },
  created() {
    console.log(this.studentManageColumns, "studentManageColumns");
  },
  mounted() {},
  methods: {
    handleReset(){
      this.studentForm.name = ''
      this.studentForm.studentId = ''
this.pageInfo.page = 1
this.getTableData()

    },
    handleSearch(){
this.pageInfo.page = 1
this.getTableData()
    },
    async getTableData(){
// const rse = await 
    },
    handleUpdate(row){
      const keys = Object.keys(this.studentForm)
      keys.forEach(key=> {
        this.studentForm[key] = row[key]
      });
      this.curRow= row
      this.dialogFormVisible = true
    },
    handleState(row,flag){

    },
    handleDelete(row){
      this.curRow= row
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

    },
    handleSure(){
         this.$refs['dataForm'].validate((valid) => {
        if (valid) {
         
        }else{

        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.studentManage {
  // height: calc(100vh - 84px);
  height: 100%;
  padding: 20px;
  .filter-container {
    display: flex;
    align-items: center;
    .text {
      height: 36px;
      line-height: 36px;
      margin-bottom: 10px;
      text-align: center;
    }
  }
}
</style>
